import type { QuestionData } from '../../interface'
import styles from './index.module.less'

interface Props {
    title: string
    isLeader: boolean
    teacherName: string
    avg_score: number
    options: QuestionData['options']
    // options: Record<string, { name: string; score: number }>
}

export const TeacherRateQuestion = (props: Props) => {
    return (
        <div className={styles.box}>
            <div className={styles.title}>{props.title}</div>
            <div className={styles.answerBox}>
                <div className={styles.answerBox_header}>
                    <div className={styles.answerBox_header_name}>{`培训师：${props.teacherName}${
                        props.isLeader ? '（组长）' : ''
                    }`}</div>
                    <div className={styles.answerBox_header_score}>
                        <span>综合平均：</span>
                        <span className={styles.answerBox_header_score_value}>{`${Number(
                            props.avg_score,
                        ).toFixed(2)}分`}</span>
                    </div>
                </div>
                {Object.entries(props.options).map(([key, value], index, array) => {
                    return (
                        <div key={key}>
                            <div className={styles.answerBox_item}>
                                <div className={styles.answerBox_item_title}>{value.name}</div>
                            </div>

                            {index < array.length - 1 && (
                                <div className={styles.answerBox_splitLine} />
                            )}
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
